<template>
    <div class="error">
        <div class="not-found">没有找到相关内容</div>
        <div class="go-home">
            去
            <router-link class="go-home-link" to="/home">首页</router-link>
            发现喜欢的音乐({{ time }})
        </div>
        <img src="src/assets/is-play.gif" class="is-play">
    </div>
</template>

<script>
    export default {
        name: "404",
        data() {
            return {
                time: 0
            }
        },
        components: {},
        methods: {
            //   倒计时
            countDown() {
                let _this = this;
                _this.time--;
            },
        },
        mounted() {
            let _this = this;
            _this.time = 5;
            // 设定定时器，每一秒调用一次coundDown方法，time-1
            setInterval(_this.countDown, 1000);
        },
        // 监听
        watch: {
            //   监听 time 的值
            time: function (newVal) {
                if (newVal === 0) {
                    this.$router.push("/home");
                }
            },
        },
    }
</script>


<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;
    $padding-out: 0 0.5em;
    .error .not-found{
    font-size: 2em;
    color: $color-black;
    margin-top: 30%;
}
    .error .go-home {
    font-size: 1em;
    color: $color-grey;
    margin-top: 2em;
}

    .error  .go-home-link {
        color: $color-blue;
    }


    .error .is-play{
    border-radius: 50%;
    width: 50%;
    height: 50%;
    margin-top: 2em;
}




</style>
